<template>
  <el-dialog
    width="780px"
    :close-on-click-modal="false"
    v-model="visible"
    :show-close="false"
  >
    <div id="pdfDom">
      <h2 class="title">员工请假单</h2>
      <table class="leave-table">
        <tr align="center">
          <td width="14%">姓名</td>
          <td width="16%">{{ name }}</td>
          <td width="14%">性别</td>
          <td width="16%">{{ sex }}</td>
          <td width="14%">部门</td>
          <td>{{ dept }}</td>
        </tr>
        <tr>
          <td align="center">请假类别</td>
          <td colspan="5">{{ type }}</td>
        </tr>
        <tr>
          <td align="center">请假时间</td>
          <td colspan="5">{{ start }}&nbsp;&nbsp;~&nbsp;&nbsp;{{ end }}</td>
        </tr>
        <tr>
          <td align="center">请假事由</td>
          <td colspan="5">{{ reason }}</td>
        </tr>
        <tr>
          <td align="center">此处签字</td>
          <td colspan="2"></td>
          <td align="center">人事盖章</td>
          <td colspan="3"></td>
        </tr>
      </table>

      <p class="desc">
        备注：员工请假期间一切责任自负，假期结束后应及时返回工作岗位，否则按照旷工处理。
      </p>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="getPdf('#pdfDom')" size="medium"
          >下载请假单</el-button
        >
        <el-button size="medium" @click="cancel()">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "LeavePdf",
  data: function () {
    return {
      visible: false,
      dataForm: {
        reason: null,
        startDate: null,
        startTime: null,
        endDate: null,
        endTime: null,
        type: null,
      },
      disabledDate(date) {
        //新建请假禁止选择过去的日期
        return dayjs(date.toLocaleDateString()).isBefore(
          new Date().toLocaleDateString()
        );
      },
      dataRule: {
        reason: [{ required: true, message: "请假原因不能为空" }],
        startDate: [{ required: true, message: "开始日期不能为空" }],
        startTime: [{ required: true, message: "开始时间不能为空" }],
        endDate: [{ required: true, message: "截止日期不能为空" }],
        endTime: [{ required: true, message: "截止时间不能为空" }],
        type: [{ required: true, message: "请假类型不能为空" }],
      },
    };
  },

  created: function () {
    this.loadDataList();
  },
  methods: {
    sizeChangeHandle: function (val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.loadDataList();
    },
    currentChangeHandle: function (val) {
      this.pageIndex = val;
      this.loadDataList();
    },

    searchHandle: function () {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$refs["dataForm"].clearValidate();
          if (this.dataForm.name == "") {
            this.dataForm.name = null;
          }
          if (this.pageIndex != 1) {
            this.pageIndex = 1;
          }
          this.loadDataList();
        } else {
          return false;
        }
      });
    },

    init: function (id) {
      let that = this;
      that.visible = true;
      that.name = null;
      that.sex = null;
      that.dept = null;
      that.reason = null;
      that.start = null;
      that.end = null;
      that.type = null;
      that.$http(
        "leave/searchLeaveById",
        "POST",
        { id: id },
        true,
        function (resp) {
          that.name = resp.name;
          that.sex = resp.sex;
          that.dept = resp.dept;
          that.reason = resp.reason;
          if (resp.type == 1) {
            that.type = "病假";
          } else if (resp.type == 2) {
            that.type = " 事假";
          }
          that.start = resp.start;
          that.end = resp.end;
        }
      );
    },

    cancel: function () {
      this.visible = false;
    },
  },
};
</script>

<style lang="less" scoped="scoped">
@import url("leave_pdf.less");
</style>
 